Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <form class="form">
	<h1>Generate your custom Toast Notification</h1>
        
	<div class="form__radios">
		<div class="form__radio">
			<p>Should your notification have buttons?</p>
			<input type="radio" name="buttons" id="buttonsNo" value="false" checked>
			<label for="buttonsNo">No</label>
			<input type="radio" name="buttons" id="buttonsYes" value="true">
			<label for="buttonsYes">Yes</label>
		</div>
		<div class="form__radio">
			<p>Should the user be allowed to close the window themselves?</p>
			<input type="radio" name="close" id="closeNo" value="false">
			<label for="closeNo">No</label>
			<input type="radio" name="close" id="closeYes" value="true" checked>
			<label for="closeYes">Yes</label>
		</div>
	</div>
	
	<div class="form__radios" id="buttonsDiv">
		<div class="form__inputs">
			<label for="button1">Set first button text (optional)</label>
			<input type="text" name="button1" id="button1" maxlength="20" />
		</div>
		<div class="form__inputs">
			<label for="button2">Set second button text (optional)</label>
			<input type="text" name="button2" id="button2" maxlength="20" />
		</div>
	</div>

<div class="form__inputs">
		<label for="heading">Set a custom heading (optional)</label>
		<input type="text" name="heading" id="heading" />
		<label for="paragraph">Set a custom text (optional)</label>
		<input type="text" name="paragraph" id="paragraph" />
	</div>

<div class="form__buttons">
		<button class="btn btn--regular" value="regular">Create Regular notification</button>
		<button class="btn btn--success" value="success">Create Susccess notification</button>
		<button class="btn btn--error" value="error">Create Error notification</button>
		<button class="btn btn--warning" value="warning">Create Warning notification</button>
	</div>
</form>

</div> 
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
*, *::after, *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
html {
    font-size: 62.5%;
}
body {
    box-sizing: border-box;
    font-size: 1.6rem;
    background-color: #222226;
    color: #FEE;
    font-family: "Roboto", sans-serif;
    margin: 5rem;
}
h1 {
    margin-bottom: 2rem;
}

/* CREATE FORM */
.form {
    max-width: 60rem;
}

.form__radios {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
}
.form__radio {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 2rem;
    row-gap: .8rem;
    margin-top: 1rem;
}
.form__radio p {
    grid-column: 1 / -1;
}

.form__inputs {
    display: flex;
    flex-direction: column;
    gap: .8rem;
    margin-top: 4rem;
}
.form__inputs input, .form__radios input {
    margin-bottom: 1rem;
    background-color: #556;
    border: none;
    padding: 1rem 1.5rem;
    color: inherit;
    outline: transparent;
}

.form__buttons {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 2fr));
    gap: 1rem 2rem;
}

.btn {
    background-color: #778;
    color: inherit;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
}
.btn:hover { background-color: #556; }
.btn--success { background-color: rgb(21, 173, 89); }
.btn--success:hover { background-color: rgb(12, 134, 67); }
.btn--error { background-color: rgb(199, 29, 66); }
.btn--error:hover { background-color: rgb(158, 16, 47); }
.btn--warning { background-color: rgb(232, 172, 21); color: #222226; }
.btn--warning:hover { background-color: rgb(199, 141, 15); }

/* THE ACTUAL TOAST NOTIFICATIONS */
.toast {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 2rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 90%;
}

.toast__message {
    position: relative;
    color: #EEE;
    background-color: #334;
    width: 50rem;
    max-width: 100%;
    max-width: 100%;
    padding: 3rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: center;
    font-size: 1.3rem;
    border-left: 3px solid #EEE;
    animation: toast 4s cubic-bezier(0.075, 0.82, 0.165, 1) forwards;
}

.toast__icon {
    background-color: rgb(21, 173, 89);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    color: #222226;
    display: grid;
    place-items: center;
}

.toast__icon svg {
    height: 2rem;
    width: 2rem;
}

.toast__heading {
    margin-bottom: .8rem;
}

.toast__buttons {
    display: grid;
    /* flex-direction: row; */
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
    justify-content: stretch;
}
.toast__buttons button {
    background-color: rgba(255,255,255, .1);
    border: none;
    color: inherit;
    padding: .5rem 1rem;
    cursor: pointer;
}
.toast__buttons button:hover {
    background-color: rgba(255,255,255, .2);
}

.toast__close {
    position: absolute;
    top: 1rem;
    right: 2rem;
    font-size: 2rem;
    font-weight: 100;
    color: #888;
    cursor: pointer;
}

/* ERROR MESSAGES */
.toast__message--error {
    background-color: #334;
    background-image: linear-gradient(to right,
        rgba(136, 7, 35, 0.3),
        rgba(136, 7, 35, 0) 30%);
    border-left: 3px solid rgb(199, 29, 66);
}
.toast__message--error .toast__icon {
    background-color: rgb(199, 29, 66);
}
.toast__message--error .toast__icon svg {
    height: 1.6rem;
    width: 1.6rem;
}
.toast__message--error .toast__heading {
    color: rgb(199, 29, 66);
}

/* WARNING MESSAGES */
.toast__message--warning {
    background-color: #334;
    background-image: linear-gradient(to right,
        rgba(145, 93, 10, 0.3),
        rgba(145, 93, 10, 0) 30%);
    border-left: 3px solid rgb(232, 172, 21);
}
.toast__message--warning .toast__icon {
    background-color: rgb(232, 172, 21);
}
.toast__message--warning .toast__icon svg {
    height: 2.5rem;
    width: 2.5rem;
}
.toast__message--warning .toast__heading {
    color: rgb(232, 172, 21);
}

/* SUCCESS MESSAGES */
.toast__message--success {
    background-color: #334;
    background-image: linear-gradient(to right,
        rgba(12, 100, 52, 0.3),
        rgba(12, 100, 52, 0) 30%);
    border-left: 3px solid rgb(21, 173, 89);
}
.toast__message--success .toast__icon {
    background-color: rgb(21, 173, 89);
}
.toast__message--success .toast__icon svg {
    height: 2rem;
    width: 2rem;
}
.toast__message--success .toast__heading {
    color: rgb(21, 173, 89);
}

@keyframes toast {
    0% {
        transform: translateY(150%);
        opacity: 0;
    }
    10%, 90% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

@media only screen and (max-width: 650px) {
    html {
        font-size: 50%;
    }
    body {
        margin: 2rem;
    }
}

console.log("Event Fired")
'use strict';

const btns = document.querySelectorAll('.btn');
const toastContainer = document.querySelector('.toast');
const buttonYes = document.querySelector('#buttonsYes');
const buttonNo = document.querySelector('#buttonsNo');
const buttonsContainer = document.querySelector('#buttonsDiv');

const options = {
    regular: {
        heading: 'This is a Regular notification',
        paragraph: 'This toast message notifies you of something. Whatever that may be.',
        svg: ''
    },
    success: {
        heading: 'This is a Success notification',
        paragraph: 'This toast message notifies you of all your great successes. You rock!',
        svg: '<div class="toast__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9 20.42l-6.21-6.21l2.83-2.83L9 14.77l9.88-9.89l2.83 2.83z"/></svg></div>'
    },
    error: {
        heading: 'This is an Error notification',
        paragraph: 'This toast message notifies you of an Error. Don\'t worry it\'s probably not your fault.',
        svg: '<div class="toast__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentColor" d="M15.1 3.1L12.9.9L8 5.9L3.1.9L.9 3.1l5 4.9l-5 4.9l2.2 2.2l4.9-5l4.9 5l2.2-2.2l-5-4.9z"/></svg></div>'
    },
    warning: {
        heading: 'This is a Warning notification',
        paragraph: 'This toast message notifies you of a Warning. Who knows what might have happened.',
        svg: '<div class="toast__icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M11 14V5h2v9zm0 5v-2h2v2z"/></svg></div>'
    }
}

function createToast({type='regular', buttons='false', close='true', heading='', paragraph='', button1='', button2=''}) {
    const html = `
        <div class="toast__message toast__message--${type}">
            ${options[type].svg}
            <div class="toast__text">
                <h3 class="toast__heading">
                    ${heading ? heading : options[type].heading}
                </h3>
                <p>
                    ${paragraph ? paragraph : options[type].paragraph}
                </p>
                ${buttons === 'true' ? `<div class="toast__buttons">
                    <button>
                        ${button1 ? button1 : 'Cool'}
                    </button>
                    <button>
                        ${button2 ? button2 : 'Whatever'}
                    </button>
                </div>` : ''}
                
            </div>
            ${close === 'true' ? `<span class="toast__close">×</span>` : ''}
            
        </div>
    `;
    toastContainer.insertAdjacentHTML('beforeend', html);

const toast = toastContainer.lastElementChild;
    toast.addEventListener('animationend', () => toast.remove());
}

function resetForm() {
    document.querySelector('#button1').value = '';
    document.querySelector('#button2').value = '';
    document.querySelector('#heading').value = '';
    document.querySelector('#paragraph').value = '';
}

btns.forEach(btn => btn.addEventListener('click', function(e) {
    e.preventDefault();
    const buttons = document.querySelector('input[name=buttons]:checked').value;
    const close = document.querySelector('input[name=close]:checked').value;
    const button1 = document.querySelector('#button1').value;
    const button2 = document.querySelector('#button2').value;
    const heading = document.querySelector('#heading').value;
    const paragraph = document.querySelector('#paragraph').value;
    resetForm();
    createToast({type: this.value, buttons, close, heading, paragraph, button1, button2});
}));

toastContainer.addEventListener('click', function(e) {
    if(!e.target.closest('.toast__close')) return;
    e.target.closest('.toast__message').remove();
});

createToast({type: 'success', buttons: 'false', close: 'true', heading: 'Go ahead!', paragraph: 'Create your very own Toast notification'});

function toggleButtonInputs() {
    if(buttonYes.checked) buttonsContainer.style.display = 'grid';
    else buttonsContainer.style.display = 'none';
}

toggleButtonInputs();
buttonYes.addEventListener('change', toggleButtonInputs);
buttonNo.addEventListener('change', toggleButtonInputs);

Frontend Forever App